﻿@namespace ThingsGateway.Components

<MNavigationDrawer Value="Value"
                   ValueChanged="ValueChanged"
                   Class="tg-drawer"
                          Fixed
                    Right="!AppService.MasaBlazor.RTL"
                          Temporary
                          HideOverlay
                    Width="350">
     <PrependContent>
         <MToolbar Class="m-bar--underline" Flat Height="BlazorAppService.AppBarHeight">
             <h5>
                 @AppService.I18n.T("theme")
            </h5>
        </MToolbar>
    </PrependContent>
    <ChildContent>
        <MContainer>
            <div class="mb-4">
                <div class="font-weight-black ps-1 mb-2">@AppService.I18n.T("theme")</div>
                <MButtonGroup Value="@AppService.Theme" Borderless>

                    @foreach (var (opt, icon) in s_themeOptions)
                    {
                        <MButton Value=@opt Small Depressed ActiveClass="primary--text"
                                  OnClick="(a) => SwitchTheme(opt,a)">
                             <MIcon Left>@icon</MIcon>
                                @AppService.I18n.T(opt)
                        </MButton>
                    }

                </MButtonGroup>
            </div>

            <div class="mb-4">
                <div class="font-weight-black ps-1 mb-2">@AppService.I18n.T("Color")</div>

                <ThemeColor OnColorChanged="(a)=>AppService.ThemeChange(a)" />

            </div>

            <div class="mb-4">
                <div class="font-weight-black ps-1 mb-2">@AppService.I18n.T("Direction")</div>
                <MButtonGroup Value="@AppService.MasaBlazor.RTL.ToString()" Borderless>
                    <MButton Value="@("False")" Small Depressed ActiveClass="primary--text"
                              OnClick="() => AppService.ToggleRTL(false)">
                         LTR
                         <MIcon Right>M21,18L17,14V17H5V19H17V22M9,10V15H11V4H13V15H15V4H17V2H9A4,4 0 0,0 5,6A4,4 0 0,0 9,10Z</MIcon>
                    </MButton>
                    <MButton Value="@("True")" Small Depressed ActiveClass="primary--text"
                              OnClick="() => AppService.ToggleRTL(true)">
                         RTL
                         <MIcon Right>M8,17V14L4,18L8,22V19H20V17M10,10V15H12V4H14V15H16V4H18V2H10A4,4 0 0,0 6,6A4,4 0 0,0 10,10Z</MIcon>
                    </MButton>
                </MButtonGroup>
            </div>

            <div class="mt-4">
                <div class="font-weight-black ps-1 mb-2">@AppService.I18n.T("Translations")</div>
                <MButtonGroup Value="AppService.I18n.Culture.Name" Borderless>

                    @foreach (var (opt, icon) in s_cultureNames)
                    {
                        <MButton Value=@opt Small Depressed ActiveClass="primary--text"
                                  OnClick="async() => {await AppService.OnCultureChanged(opt);await LangValueChanged.InvokeAsync(opt);}">
                             @icon
                        </MButton>
                    }

                </MButtonGroup>

            </div>


            <div class="my-4">
                <div class="font-weight-black ps-1 mb-2">@AppService.I18n.T("Tabs")</div>
                <MButtonGroup Value="@AppService.IsPageTab.ToString()" Borderless>
                    <MButton Value="@("True")" Small Depressed ActiveClass="primary--text"
                              OnClick="async() => {await AppService.ToggleTabAsync(true);await TabValueChanged.InvokeAsync(true);}">
                         @AppService.I18n.T("Pagetab")
                    </MButton>
                    <MButton Value="@("False")" Small Depressed ActiveClass="primary--text"
                              OnClick="async() => {await AppService.ToggleTabAsync(false);await TabValueChanged.InvokeAsync(false);}">
                         @AppService.I18n.T("breadcrumb")
                    </MButton>
                </MButtonGroup>
            </div>


        </MContainer>
    </ChildContent>
</MNavigationDrawer>


@code {

    [Parameter]
    public EventCallback<bool?> TabValueChanged { get; set; }
    [Parameter]
    public EventCallback<string?> LangValueChanged { get; set; }

    #region 主题
    private DotNetObjectReference<ThemeSettings>? _objRef;

    protected override void OnInitialized()
    {
        _objRef = DotNetObjectReference.Create(this);
    }

    public void SwitchTheme(string option, MouseEventArgs e)
    {
        _ = AppService.SwitchTheme(_objRef, option, e);
    }

    [JSInvokable]
    public void ToggleTheme(string option)
    {
        _ = AppService.ToggleTheme(option);
    }


    public void Dispose()
    {
        _objRef?.Dispose();
    }


    #endregion
    [Inject] BlazorAppService AppService { get; set; }

    private static Dictionary<string, string> s_cultureNames = new()
    {
        { "zh-CN", "简体中文" },
        { "en-US", "English" },
    };
    private (string opt, string icon)[] s_themeOptions
    {
        get
        {

            return new[]
            {
                    ("Light", "mdi-weather-sunny"),
                    ("Dark", "mdi-weather-night"),
                    ("System", "mdi-desktop-classic")
                };
        }
    }


    [Parameter]
    public bool? Value { get; set; }

    [Parameter]
    public EventCallback<bool?> ValueChanged { get; set; }
}